<template>
  <div class="container-fans">
    <el-card>
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>
      <!-- tabs组件 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="list">
          <div class="fans-list">
            <div class="fans-item" v-for="fans in fansList" :key="fans.id.toString()">
              <el-avatar :size="80" :src="fans.photo"></el-avatar>
              <p>{{fans.name}}</p>
              <el-button type="primary" plain size="mini">+ 关注</el-button>
            </div>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changePager"
            :current-page="reqParams.page"
            :page-size="reqParams.per_page"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="chart">粉丝画像</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "fans-page",
  data() {
    return {
      // 当前激活的tab选项卡的name属性值
      activeName: "list",
      fansList: [],
      total: 0,
      reqParams: {
        page: 1,
        per_page: 24
      }
    };
  },
  created() {
    this.getFansList();
  },
  methods: {
    changePager(newPage) {
      this.reqParams.page = newPage;
      this.getFansList();
    },
    async getFansList() {
      const {
        data: { data }
      } = await this.$http.get("/followers", { params: this.reqParams });
      this.fansList = data.results;
      this.total = data.total_count;
    }
  }
};
</script>

<style scoped lang='less'>
// 粉丝列表样式
.fans-list {
  .fans-item {
    width: 100px;
    height: 150px;
    text-align: center;
    border: 1px dashed #ddd;
    padding-top: 5px;
    display: inline-block;
    margin-right: 50px;
    margin-bottom: 30px;
    p {
      margin: 5px 0;
      font-size: 14px;
    }
  }
}
</style>